@import "variable.less"; // Variable.less
/*    Input Style
------------------------*/
.form-group {
  margin-bottom: 20px;
}

.form-control {
  height: 42px;
  border-radius: 0;
  box-shadow: none;
  border-color: @border;
  font-family: @mol;

  &:hover {
    box-shadow: none;
    border-color: @border;
  }

  &.active,
  &:focus {
    box-shadow: none;
    border-color: @default;
  }
}

.input-default {
  border-radius: 4px;
}

.input-flat {
  border-radius: 0;
}

.input-rounded {
  border-radius: 100px;
}

.input-focus {
  border-color: @primary;

  &:focus {
    border-color: @primary;
  }
}

/*    Search Box Input Button
--------------------------------*/
.input-group-btn {
  .btn {
    padding: 10px 12px;
  }
}

.input-group-default {
  .form-control {
    border-radius: 4px;
  }
}

.input-group-flat {
  .form-control {
    border-radius: 4px;
  }

  .btn {
    border-radius: 0;
    border-radius: 0;
  }
}

.input-group-rounded {
  .form-control {
    border-radius: 100px;
  }

  .btn-group-left {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
  }

  .btn-group-right {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
}

.input-group-close-icon {
  background: none;
  color: @black;
  border-color: @border;
  //    border-left: 1px solid @white;
  &.active,
  &:focus,
  &:hover {
    background: none;
    border-color: @border;
    color: @black;
  }
}

/*    Input States
-----------------------*/
.has-default,
.has-error,
.has-success,
.has-warning {
  .form-control {
    &.active,
    &:focus,
    &:hover {
      box-shadow: none;
    }
  }
}

.has-default {
  .control-label {
    color: @default;
  }

  .form-control {
    border-color: @default;

    &.active,
    &:focus,
    &:hover {
      border-color: @default;
    }
  }
}

.has-success {
  .control-label {
    color: @success;
  }

  .form-control {
    border-color: @success;

    &.active,
    &:focus,
    &:hover {
      border-color: @success;
    }
  }
}

.has-warning {
  .control-label {
    color: @warning;
  }

  .form-control {
    border-color: @warning;

    &.active,
    &:focus,
    &:hover {
      border-color: @warning;
    }
  }
}

.has-error {
  .control-label {
    color: @danger;
  }

  .form-control {
    border-color: @danger;

    &.active,
    &:focus,
    &:hover {
      border-color: @danger;
    }
  }
}

.has-feedback label ~ .form-control-feedback {
  top: 35px;
}

.form-horizontal .has-feedback .form-control-feedback {
  top: 5px;
}

.has-success {
  .form-control-feedback {
    color: @success;
  }
}

.has-warning {
  .form-control-feedback {
    color: @warning;
  }
}

.has-error {
  .form-control-feedback {
    color: @danger;
  }
}

.has-success .input-group-addon {
  background-color: lighten(@success, 25%);
  border-color: @success;
  color: @success;
}

.has-warning .input-group-addon {
  background-color: lighten(@warning, 25%);
  border-color: @warning;
  color: @warning;
}

.has-error .input-group-addon {
  background-color: lighten(@danger, 25%);
  border-color: @danger;
  color: @danger;
}

/*    Input Size
--------------------*/

.input-sm {
  //  border-radius: 3px;
  font-size: 12px;
  height: 30px;
  line-height: 1.5; //  padding: 5px 10px;
}

.input-lg {
  //  border-radius: 6px;
  font-size: 18px;
  height: 46px;
  line-height: 1.33333; //  padding: 10px 16px;
}

/*    Basic form
----------------------*/
label {
  font-weight: 400;
  margin-bottom: 10px;
}

/*    Form Horizontal
----------------------*/
.form-horizontal {
  .control-label {
    padding-top: 12px;
  }
}

.form-horizontal {
  .form-group {
    margin-left: 0;
    margin-right: 0;
  }
}

.dropdown-menu li {
  font-size: 14px;
  padding: 5px 15px;
}